<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>MyPetStore Management</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">JPetStore后台管理</div>

        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item" >
                <a href="javascript:;" name="side"><i class="layui-icon">&#xe668;</i></a>
            </li>
        </ul>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="/home"><i class="layui-icon" style="font-size: 20px;">&#xe68e;</i>&nbsp home</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <p th:text="${session.account?.username}"></p>
                </a>
                <dl class="layui-nav-child">
                    <dd><a name="manager">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/exit"><i class="layui-icon" style="font-size: 15px; color: #1E9FFF;">&#xe682;</i>退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon" >&#xe698;</i>  <span>商品管理</span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/categories"><i class="layui-icon" >&#xe610;</i>  <span>大类</span></a></dd>
                        <dd><a href="/products"><i class="layui-icon" >&#xe68c;</i>  <span>小类</span></a></dd>
                        <dd><a href="/items"><i class="layui-icon" >&#xe691;</i>  <span>商品</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="/accounts"><i class="layui-icon" >&#xe66f;</i>  <span>用户管理</span></a></li>
                <li class="layui-nav-item"><a href="/orders"><i class="layui-icon" >&#xe609;</i>  <span>订单管理</span></a></li>
                <li class="layui-nav-item layui-nav-itemed">

                </li>
                <li class="layui-nav-item"><a href="/log"><i class="layui-icon" >&#xe68d;</i>  <span>日志查看</span></a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-form">
            <div class="layui-input-inline" style="width: 75%; margin-left: 10px;">
                <input type="text" name="keyword" placeholder="清输入搜索内容" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-btn-group" style="float: right;" >
                <button class="layui-btn" type="button" name="search">搜索</button>

            </div>
        </div>

        <table id="logs" class="layui-table" lay-even lay-skin="nob" lay-filter="logs_table">
            <thead>
            <tr>
                <th lay-data="{field:'username', sort: true}">Username</th>
                <th lay-data="{field:'operation', sort: true}">Operation</th>
                <th lay-data="{field:'date', sort: true}">Date</th>
                <th lay-data="{field:'option'}">Option</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="log:${logs}">
                <td th:text="${log.username}"></td>
                <td th:text="${log.operation}"></td>
                <td th:text="${log.date}"></td>
                <td>
                    <a th:id="${log.date}" class="layui-btn layui-btn-xs layui-btn-normal" name="view_btn"><i class="layui-icon">&#xe615;</i>查看</a>
                    <a th:href="@{'/deleteLog?date='+${log.date}}" class="layui-btn layui-btn-xs layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</a>
                </td>
            </tr>
            </tbody>
        </table>

    </div>


</div>

<script type="text/html" id="log_fields">

    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">username:</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input type="text" name="username" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">ip:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="ip" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">type:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="type" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">operation:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="operation" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">date:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="date" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">remark:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="remark" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
</script>

<script type="text/html" id="account_fields">

    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">用户名:</label>
        <div class="layui-input-block" style="margin-right: 20px">
            <input type="text" name="username" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>账户信息</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="firstName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="lastName" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="email" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址1:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="address1" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址2:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="address2" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在城市:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="city" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在州:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="state" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮政编码:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="zip" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在国家:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <input type="text" name="country" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center">
        <label>个人资料信息</label>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">语言偏好:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <select name="languagePreference">
                <option value="Chinese">Chinese</option>
                <option value="English">English</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">最喜欢的商品大类:</label>
        <div class="layui-input-block" style="margin-right: 20px;">
            <select name="favouriteCategoryId">
                <option th:each="category:${categories}" th:value="${category.categoryId}" th:text="${category.categoryId}"></option>
            </select>
        </div>
    </div>

</script>

<script src="layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layer', 'table'], function() {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;

        table.init('logs_table', {
            height: 500 //设置高度
            ,page: true
            ,done: function () {
                $("[name='view_btn']").on('click', function () {
                    var view_btn = $(this);
                    console.log(view_btn);
                    layer.open({
                        type: 1,title: false,closeBtn: false,area: '450px;',shade: 0.8,id: 'demo',btn: ['确认', '取消'],btnAlign: 'c',moveType: 1
                        ,content: '<form id="form" class="layui-form" method="post">\n'+
                            $("#log_fields").html() +
                            '</form>'
                        ,success: function(layero){
                            $.ajax({
                                type: "GET",
                                async: false,
                                url: "/log/"+view_btn.attr('id'),
                                success: function (data) {
                                    console.log(data);
                                    var log = JSON.parse(data);
                                    $("#form [name='username']").attr({"value": log.username, "readonly": "readonly"});
                                    $("#form [name='ip']").attr({"value": log.ip, "readonly": "readonly"});
                                    $("#form [name='type']").attr({"value": log.type, "readonly": "readonly"});
                                    $("#form [name='operation']").attr({"value": log.operation, "readonly": "readonly"});
                                    $("#form [name='date']").attr({"value": log.date, "readonly": "readonly"});
                                    $("#form [name='remark']").attr({"value":log.remark, "readonly": "readonly"});
                                }
                            });
                            form.render();
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').on("click", function () {
                                console.log($("#form").serialize());
                            });
                        }
                    });
                });
            }
        });

        $("button[name='search']").on("click", function () {
            var keyword = $("input[name='keyword']").val();
            console.log('keyword');
            if (keyword !== '') {
                $("[lay-id='logs'] .layui-table tbody tr").hide()
                    .filter(":contains("+$.trim(keyword.toLowerCase())+")").show()
                    .filter(":contains("+$.trim(keyword.toUpperCase())+")").show();
            }
        })

        $("button[name='reset_search']").on("click", function () {
            $("[lay-id='logs'] .layui-table tbody tr").show();
        })

        var isShow = true;  //定义一个标志位
        $("[name='side']").on("click", function () {
            console.log("side");
            //选择出所有的span，并判断是不是hidden
            $('.layui-nav-item span').each(function(){
                if($(this).is(':hidden')){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            //判断isshow的状态
            if(isShow){
                $('.layui-side.layui-bg-black').width(60); //设置宽度
                // $('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置
                //将footer和body的宽度修改
                $('.layui-body').css('left', 60+'px');
                $('.layui-footer').css('left', 60+'px');
                //将二级导航栏隐藏
                $('dd span').each(function(){
                    $(this).hide();
                });
                //修改标志位
                isShow =false;
            }else{
                $('.layui-side.layui-bg-black').width(200);
                // $('.kit-side-fold i').css('margin-right', '10%');
                $('.layui-body').css('left', 200+'px');
                $('.layui-footer').css('left', 200+'px');
                $('dd span').each(function(){
                    $(this).show();
                });
                isShow =true;
            }
        });
    });
</script>

<script th:inline="javascript">
    layui.use(['element', 'form', 'layer', 'table'], function() {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        var routing = [[${session.account.username}]];
        var username=[[${session.account.username}]];
        var firstname=[[${session.account.firstName}]];
        var lastName=[[${session.account.lastName}]];
        var email=[[${session.account.email}]];
        var phone=[[${session.account.phone}]];
        var address1=[[${session.account.address1}]];
        var address2=[[${session.account.address2}]];
        var city=[[${session.account.city}]];
        var state=[[${session.account.state}]];
        var zip=[[${session.account.zip}]];
        var country=[[${session.account.country}]];

        // table.init('users_table', {
        //     height: 500 //设置高度
        //     ,page: true
        // });

        $("[name='manager']").on("click", function () {
            var modifyBtn = $(this);
            layer.open({
                type: 1,title: false,closeBtn: false,area: '500px;',shade: 0.8,id: 'demo',btn: ['确认', '取消'],btnAlign: 'c',moveType: 1
                ,content: '<form id="form" class="layui-form" method="post">\n' +
                    '<input type="hidden" name="_method" value="put">' +
                    $("#account_fields").html() +
                    '</form>'
                , success: function (layero) {
                    $.ajax({
                        type: "GET", async: false,
                        url:"/accounts/"+routing,
                        success: function (data) {
                            $("#form").attr({"action": "/accounts/"+ routing + "/password"});
                            console.log(data);
                            var account = JSON.parse(data);
                            $("#form [name='username']").attr({"value": username, "readonly": "readonly"}).css("color","#999999");
                            $("#form [name='firstName']").attr({"value": firstname});
                            $("#form [name='lastName']").attr({"value": lastName});
                            $("#form [name='email']").attr({"value": email});
                            $("#form [name='phone']").attr({"value": phone});
                            $("#form [name='address1']").attr({"value": address1});
                            $("#form [name='address2']").attr({"value": address2});
                            $("#form [name='city']").attr({"value": city});
                            $("#form [name='state']").attr({"value": state});
                            $("#form [name='zip']").attr({"value": zip});
                            $("#form [name='country']").attr({"value": country});
                            $("#form option[value="+account.languagePreference+"]").attr({"selected": "selected"});
                            $("#form option[value="+account.favouriteCategoryId+"]").attr({"selected": "selected"});
                        }
                    });
                    form.render();
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').on("click", function () {
                        console.log($("#form").serialize());
                        $("#form").submit();
                    });
                }
            });
        });
    });
</script>
</body>
</html>